<template>
  <div class="wrap">
    <pro-table
      ref="proTableInst"
      tableTitle="维修列表"
      :columns="columns"
      :request="fetchFixPage"
    >
      <template #operation>
        <n-space>
          <n-button type="primary" @click="handleAddFix">新增维修</n-button>
        </n-space>
      </template>
    </pro-table>

    <pro-dialog
      v-model:showDialog="fixModalShow"
      :modalProps="modalProps"
      :width="1000"
      :showButton="true"
      confirmButtonText="确定"
      :showConfirmButton="handleType !== 'check'"
      :cancelButtonText="handleType === 'check' ? '关闭' : '取消'"
      :contentStyle="{ 'padding-left': '10px', 'padding-right': '10px' }"
      :button-loading="confirmLoading"
      @handleConfirm="fixConfirm"
      @afterClosed="
        () => {
          resetFixForm()
        }
      "
      v-bind="$attrs"
    >
      <pro-form
        ref="fixFormInst"
        v-model:form="fixForm"
        :formProps="{
          labelPlacement: 'left',
          labelWidth: '100px'
        }"
        :options="fixFormOptions"
      ></pro-form>
    </pro-dialog>
  </div>
</template>

<script lang="ts" setup name="Fix">
  import { ProTableInst } from '@/components/pro-table/type'
  import { ProFormInst } from '@/components/pro-form/type'
  import { useFixApi, useFixProForm, useFixProTable } from './hooks'
  import { FixModel } from '@/api/model/fix-model'
  import useGetBudgetList from '@/hooks/useGetBudgetList'
  import { useUser } from '@/store/modules/user'

  const proTableInst = ref<ProTableInst | null>(null)
  const fixFormInst = ref<ProFormInst | null>(null)

  const fixModalShow = ref(false)
  const handleType = ref<'add' | 'edit' | 'check'>('check')
  const handleTag = computed(() =>
    handleType.value === 'add'
      ? '新增维修'
      : handleType.value === 'check'
      ? '维修详情'
      : '修改维修'
  )
  const modalProps = computed(() => {
    return {
      showIcon: false,
      title: handleTag.value
    }
  })

  const { userInfo } = storeToRefs(useUser())

  const { typeOptions, typeLoading } = useGetTypeList()
  const { fetchGetBudgetList, budgetOptions, budgetLoading } =
    useGetBudgetList()

  const { fixForm, resetFixForm, fixFormOptions } = useFixProForm({
    handleType,
    typeOptions,
    typeLoading,
    budgetOptions,
    budgetLoading
  })

  const handleAddFix = () => {
    handleType.value = 'add'
    fixModalShow.value = true
  }

  const handleEditFix = (row: FixModel, type: 'check' | 'edit') => {
    fixForm.value = row
    handleType.value = type
    fixModalShow.value = true
  }
  // 维修成功或者失败
  const handleFix = async (row: FixModel, isSuccess: boolean) => {
    handleType.value = 'edit'
    fixForm.value = row
    fixForm.value.fixType = isSuccess ? '2' : '1'
    await fetchAddOrEditFix(isSuccess ? '资产维修成功' : '资产维修失败')
  }

  const fixConfirm = async () => {
    if (await fixFormInst.value?.handleSubmit()) {
      fetchAddOrEditFix()
    }
  }

  const { fetchFixPage, fetchAddOrEditFix, fetchDelFix, confirmLoading } =
    useFixApi({
      handleType,
      handleTag,
      fixModalShow,
      fixForm,
      proTableInst,
      userInfo
    })
  const { columns } = useFixProTable({
    typeOptions,
    typeLoading,
    budgetOptions,
    handleEditFix,
    fetchDelFix,
    handleFix
  })

  watch(fixModalShow, (val) => {
    if (val) fetchGetBudgetList(handleType.value === 'add')
  })
</script>

<style lang="less" scoped></style>
